<template>
	<uv-popup ref="popupRef" round='16px' mode="bottom" :safeAreaInsetBottom='false' @change="change">
		<div class="school-popup safe-area-inset-bottom">
			<div class="school-popup-search">
				<uv-search shape="round" placeholder="请输入高校名称" v-model="keyword" :showAction='false' height="75rpx"></uv-search>
			</div>

			<div class="toolbar">
				<text @click="close">取消</text>
				<text @click="confirm">确定</text>
			</div>

			<div class="picker-box">
				<picker-view class="picker-view" indicator-style="height: 44px" v-if="computedList['length']" :value="index" @change="bindChange">
					<picker-view-column>
						<view class="item-view" v-for="(item) in computedList" :key="item['_id']">{{item['name']}}</view>
					</picker-view-column>
				</picker-view>
			</div>
		</div>
	</uv-popup>
</template>

<script setup>
	import { ref, onMounted, computed, nextTick } from 'vue';

	const props = defineProps({
		schoolList: {
			type: Array,
			default: () => []
		}
	})

	const emits = defineEmits(['change', 'confirm'])

	const index = ref([0]);
	const keyword = ref('');
	const popupRef = ref(null);

	const computedList = computed(() => {
		const list = props.schoolList;
		if (keyword.value) {
			const regex = new RegExp(keyword.value, 'i');
			return list.filter(item => {
				return item['name'].search(regex) !== -1
			})
		}
		return list;
	})

	function change(e) {
		emits('change', e.show)
	}

	function bindChange(e) {
		index.value = e.detail.value;
	}

	function confirm() {
		close();
		if (computedList.value.length) {
			const [indexl] = index.value;
			emits('confirm', computedList.value[indexl])
		}
	}

	function open() {
		index.value = [0];
		keyword.value = '';
		nextTick(() => {
			popupRef.value.open()
		})
	}

	function close() {
		popupRef.value.close()
	}

	defineExpose({
		open,
		close
	})
</script>

<style lang="scss" scoped>
	.school-popup {
		.school-popup-search {
			padding: 20rpx $side-width;
			padding-bottom: 10rpx;
		}

		.toolbar {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 88rpx;
			padding: 0 $side-width;

			text:first-child {
				color: $uv-tips-color;
			}

			text:last-child {
				color: $uv-primary;
			}
		}

		.picker-box {
			height: 530rpx;

			.picker-view {
				width: 750rpx;
				height: 530rpx;

				.item-view {
					line-height: 44px;
					text-align: center;
				}
			}
		}
	}
</style>